<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>委托单管理</title>
	<meta name="decorator" content="ani"/>
	<style>

		#searchresult
		{
			width: 800px;
			position: absolute;
			z-index:1000;
			overflow: hidden;
			left: 140px;
			top: 71px;
			background: #E0E0E0;
			border-top: none;

		}

		.line
		{
			font-size: 15px;
			background: #E0E0E0;
			width: 800px;
			padding:0px;
		}
		.hover
		{
			background: #007ab8;
			width: 800px;
			color: #fff;
		}
		.std
		{
			width: 800px;
		}

	</style>
	<script type="text/javascript">
		var validateForm;
		var $table; // 父页面table表格id
		var $topIndex;//弹出窗口的 index
		function doSubmit(table, index){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
			  $table = table;
			  $topIndex = index;
			  jp.loading();
			  $("#inputForm").submit();
			  return true;
		  }

		  return false;
		}

		$(document).ready(function() {
            var wid=$("#wid").val();
            $.ajax({
                url:'${ctx}/infor/width/findWidth',
                success:function (data) {
                    $("#width").empty();
                    $.each(JSON.parse(data), function (idx, item) {
                        if(wid==item.width){
                            $("#width").append("<option selected='selected' value='"+item.width+"'>"+item.width+"</option>");
                        }else{
                            $("#width").append("<option value='"+item.width+"'>"+item.width+"</option>");
                        }
                    })

                }
            })
			validateForm = $("#inputForm").validate({
				submitHandler: function(form){
					jp.post("${ctx}/tms/newPlanning/save",$('#inputForm').serialize(),function(data){
						if(data.success){
	                    	$table.bootstrapTable('refresh');
	                    	jp.success(data.msg);
	                    	jp.close($topIndex);//关闭dialog

	                    }else{
            	  			jp.error(data.msg);
	                    }
					})
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
	        $('#date').datetimepicker({
				 format: "YYYY-MM-DD"
		    });
	        $('#fhdate').datetimepicker({
				 format: "YYYY-MM-DD"
		    });
	        $('#dhdate').datetimepicker({
				 format: "YYYY-MM-DD"
		    });
		});
        function ChangeCoords() {
            //    var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
            //    var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            var left = $("#site").position().left; //获取距离最左端的距离，像素，整型
            var top = $("#site").position().top + 32; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            $("#searchresult").css("left", left + "px"); //重新定义CSS属性
            $("#searchresult").css("top", top + "px"); //同上
        }
        function se(evt) {
            ChangeCoords(); //控制查询结果div坐标
            var k = window.event ? evt.keyCode : evt.which;
            //输入框的id为txt_search，这里监听输入框的keyup事件
            //不为空 && 不为上箭头或下箭头或回车

            if ($("#site").val() != ""  && k == 13) {
                $.ajax({
                    type: 'post',
                    async: true, //同步执行，不然会有问题
                    dataType: "json",
                    url: "${ctx}/infor/newCustomers/getLnCustomersByName?name="+$("#site").val()+"&pro=${fns:getUseroffice()}",   //提交的页面/方法
                    error: function (msg) {//请求失败处理函数
                        alert("数据加载失败");
                    },
                    success: function (data) { //请求成功后处理函数。
						/*  var objData = eval("(" + data.userName + ")");   */
                        console.log(data);
                        if (data.length > 0) {
                            var layer = "";
                            layer = "<table id='aa'>";
                            $.each(data, function (idx, item) {
                                layer += "<tr class='line' id='"+item.id+"'><td class='std'>" + item.site+ "</td></tr>";
                            });
                            layer += "</table>";

                            //将结果添加到div中
                            $("#searchresult").empty();
                            $("#searchresult").append(layer);
                            $(".line:first").addClass("hover");
                            $("#searchresult").css("display", "");
                            //鼠标移动事件

                            $(".line").hover(function () {
                                $(".line").removeClass("hover");
                                $(this).addClass("hover");
                            }, function () {
                                $(this).removeClass("hover");
                                //$("#searchresult").css("display", "none");
                            });
                            //鼠标点击事件
                            $(".line").click(function () {
                                $("#site").val($(this).text());
                                tc($(this).attr("id"));
                                $("#searchresult").css("display", "none");
                            });
                        } else {
                            $("#searchresult").empty();
                            $("#searchresult").css("display", "none");
                        }
                    }
                });
            }
            else if (k == 38) {//上箭头
                $('#aa tr.hover').prev().addClass("hover");
                $('#aa tr.hover').next().removeClass("hover");
                $('#site').val($('#aa tr.hover').text());
            }
            else if (k == 40) {//下箭头
                $('#aa tr.hover').next().addClass("hover");
                $('#aa tr.hover').prev().removeClass("hover");
                $('#site').val($('#aa tr.hover').text());
            }

            else {
                $("#searchresult").empty();
                $("#searchresult").css("display", "none");
            }
        };
        $("#searchresult").bind("mouseleave", function () {
            $("#searchresult").empty();
            $("#searchresult").css("display", "none");
        });

        function tc(id) {
            url='${ctx}/infor/newCustomers/det?i='+id
            $.ajax({
                url:url,
                success:function (data) {
                    $("#dzs").val(data.dzs);
                    $("#dzdcs").val(data.dzcs);
                    $("#qrr").val(data.qrr);
                    $("#qrrdh").val(data.qrrdh);
                    $("#ysxl").val(data.ysxl);
                    $("#htlc").val(data.htlc);
                    $("#khtstq").val(data.tsxq);
                    $("#shdw").val(data.dwmc);
                    $("#qydName").val(data.qyd.name);
                    $("#qydId").val(data.qyd.id);
                    $("#jsdName").val(data.jsd.name);
                    $("#jsdId").val(data.jsd.id);
                    $("#customer").val(data.id);
                },
                error:function (data) {
                    alert("失败了");

                }
            })

        }

	</script>
</head>
<body class="bg-white">
		<form:form id="inputForm" modelAttribute="newPlanning" class="form-horizontal">
		<form:hidden path="id"/>
			<form:hidden path="customer"/>
		<sys:message content="${message}"/>
			<input type="hidden" id="wid" value="${newPlanning.width}"/>
		<table class="table table-bordered">
		   <tbody>

				<tr>

					<td class="width-8 active"><label class="pull-right">委托单号：</label></td>
					<td class="width-17">
						<form:input path="wtdh" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">装运单号：</label></td>
					<td class="width-17">
						<form:input path="zydh" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">下单日期：</label></td>
					<td class="width-17">
						<div class='input-group form_datetime' id='date'>
							<input type='text'  name="date" class="form-control"  value="<fmt:formatDate value="${newPlanning.date}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
							<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
						</div>

					</td>
					<td class="width-8 active"><label class="pull-right">项目：</label></td>
					<td class="width-17">
						<form:input path="pro" htmlEscape="false"    class="form-control "/>
					</td>
				</tr>
				<tr>
					<td class="width-8 active"><label class="pull-right">委托单状态：</label></td>
					<td class="width-17">
						<form:input path="status" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">作业类型：</label></td>
					<td class="width-17">
						<form:select path="zylx" class="form-control ">
							<form:options items="${fns:getDictList('workType')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</td>
					<td class="width-8 active"><label class="pull-right">要求发货日期：</label></td>
					<td class="width-17">
						<div class='input-group form_datetime' id='fhdate'>
							<input type='text'  name="fhdate" class="form-control"  value="<fmt:formatDate value="${newPlanning.fhdate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
							<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
						</div>

					</td>
					<td class="width-8 active"><label class="pull-right">要求到货日期：</label></td>
					<td class="width-17">
						<div class='input-group form_datetime' id='dhdate'>
							<input type='text'  name="dhdate" class="form-control"  value="<fmt:formatDate value="${newPlanning.dhdate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
							<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
						</div>

					</td>
				</tr>
				<tr>
					<td class="width-8 active"><label class="pull-right">收货详细地址：</label></td>
					<td class="width-42" colspan="3">
						<input name="site" id="site" value="${newPlanning.site}" onkeyup="se(event)" autocomplete="off"  class="form-control "/>
						<div id="searchresult" style="display: none;"></div>

					</td>

					<td class="width-8 active"><label class="pull-right">起运地：</label></td>
					<td class="width-17">
						<sys:gridselect    url="${ctx}/infor/start/data" id="qyd" name="qyd.id" value="${newPlanning.qyd.id}" labelName="qyd.name" labelValue="${newPlanning.qyd.name}"
										   title="选择起运地" cssClass="form-control required" fieldLabels="名称" fieldKeys="name" searchLabels="名称" searchKeys="name"  ></sys:gridselect>
					</td>
					<td class="width-8 active"><label class="pull-right">结算地：</label></td>
					<td class="width-17">
						<sys:gridselect    url="${ctx}/infor/settlement/data" id="jsd" name="jsd.id" value="${newPlanning.jsd.id}" labelName="jsd.name" labelValue="${newPlanning.jsd.name}"
										   title="选择结算地" cssClass="form-control required" fieldLabels="名称" fieldKeys="name" searchLabels="名称" searchKeys="name"  ></sys:gridselect>

					</td>
				</tr>
				<tr>

					<td class="width-8 active"><label class="pull-right">收货单位：</label></td>
					<td class="width-17">
						<form:input path="shdw" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">收货单位确认人：</label></td>
					<td class="width-17">
						<form:input path="qrr" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">确认人电话：</label></td>
					<td class="width-17">
						<form:input path="qrrdh" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">到站省：</label></td>
					<td class="width-17">
						<form:input path="dzs" htmlEscape="false"    class="form-control "/>
					</td>

				</tr>
				<tr>
					<td class="width-8 active"><label class="pull-right">到站地城市：</label></td>
					<td class="width-17">
						<form:input path="dzdcs" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">订单类型：</label></td>
					<td class="width-17">
						<form:select path="type" class="form-control ">
							<form:options items="${fns:getDictList('orderType')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>

					</td>
					<td class="width-8 active"><label class="pull-right">运输线路：</label></td>
					<td class="width-17">
						<form:input path="ysxl" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">合同里程：</label></td>
					<td class="width-17">
						<form:input path="htlc" htmlEscape="false"    class="form-control "/>
					</td>

				</tr>
				<tr>
					<td class="width-8 active"><label class="pull-right">运输方式：</label></td>
					<td class="width-17">
						<form:select path="ysfs" class="form-control ">
							<form:options items="${fns:getDictList('transport_mode')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>

					</td>
					<td class="width-8 active"><label class="pull-right">结算吨位区间：</label></td>
					<td class="width-17">
						<select id="width" name="width"  class="form-control ">
						</select>
					</td>
					<td class="width-8 active"><label class="pull-right">结算方式：</label></td>
					<td class="width-17">
						<form:select path="jsfs" class="form-control ">
							<form:options items="${fns:getDictList('transport_mode')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>

					</td>
					<td class="width-8 active"><label class="pull-right">结算类型：</label></td>
					<td class="width-17">
						<form:select path="jslx" class="form-control ">
							<form:options items="${fns:getDictList('transport_mode')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>

					</td>


				<tr>

				<tr>
					<td class="width-8 active"><label class="pull-right">计费条件：</label></td>
					<td class="width-17">
						<form:input path="jf" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-8 active"><label class="pull-right">提货单号：</label></td>
					<td class="width-17">
						<form:input path="thdh" htmlEscape="false"    class="form-control "/>
					</td>
					<%--<td class="width-15 active"><label class="pull-right">物料编码：</label></td>--%>
					<%--<td class="width-35">--%>
						<%--<form:input path="code" htmlEscape="false"    class="form-control "/>--%>
					<%--</td>--%>

					<td class="width-8 active"><label class="pull-right">物料名称：</label></td>
					<td class="width-42" colspan="3">
						<sys:gridselect    url="${ctx}/infor/goods/data" id="name" name="name.id" value="${newPlanning.name.id}" labelName="name.name" labelValue="${newPlanning.name.name}"
										   title="选择物料" cssClass="form-control required" fieldLabels="物料" fieldKeys="name" searchLabels="物料名称" searchKeys="name"  ></sys:gridselect>

					</td>


				</tr>
<tr>
	<td class="width-8 active"><label class="pull-right">计划量：</label></td>
	<td class="width-17">
		<form:input path="gross" htmlEscape="false"    class="form-control "/>
	</td>
	<td class="width-8 active"><label class="pull-right">提货仓库：</label></td>
	<td class="width-17">
		<sys:gridselect    url="${ctx}/infor/takeAddress/data" id="deop" name="deop.id" value="${newPlanning.deop.id}" labelName="deop.store" labelValue="${newPlanning.deop.store}"
						   title="选择仓库" cssClass="form-control required" fieldLabels="仓库" fieldKeys="store" searchLabels="仓库" searchKeys="store"  ></sys:gridselect>
	</td>
</tr>
				<tr>

					<td class="width-8 active"><label class="pull-right">客户特殊需求：</label></td>
					<td class="width-42" colspan="3">
						<form:input path="khtstq" htmlEscape="false"    class="form-control "/>
					</td>

					<td class="width-8 active" ><label class="pull-right">备注信息：</label></td>
					<td class="width-42" colspan="3">
						<form:input path="remarks" htmlEscape="false"   class="form-control "/>
					</td>
				</tr>









		 	</tbody>
		</table>
	</form:form>
</body>
</html>